<template>
    <div class="search">
        <topView class="top" 
            @search="handleTopSearch"
            :initKeyword="classListQueryParams.keyword"
        ></topView>
        <searchCourseView 
            @courseTypeSelected="handleCourseTypeSelected"
            @courseWaySelected="handleCourseWaySelected"
            @subjectSelected="handleCourseSubjectId"
        ></searchCourseView>
        <classListView :queryParams="classListQueryParams"></classListView>
        <footerView></footerView>
    </div>
</template>
<script>
    import classListView from "./components/classListView.vue";
    import searchCourseView from "./components/searchCourseView.vue";
    import topView from "@/components/topView.vue";
    import footerView from "@/components/footerView.vue";
    export default {
        data() {
            return {
                classListQueryParams: {
                    type: "",
                    keyword: "",
                    subjectId: "", // 默认选择全部专题
                    courseType: "", // 默认选择全部课程方式
                }
            };
        },
        components: {
            topView,
            footerView,
            searchCourseView,
            classListView,
        },

        methods: {
            handleCourseTypeSelected(type) {
                console.log("课程类型已选择:", type);
                this.classListQueryParams.type = type;
                console.log(this.classListQueryParams);
            },
            handleCourseWaySelected(type) {
                if (type === '') {
                    // 若选中全部方式，移除 courseType 参数
                    delete this.classListQueryParams.courseType; 
                } else {
                    // 若选中具体方式，添加 courseType 参数
                    this.classListQueryParams.courseType = type; 
                }
            },
            handleCourseSubjectId(id) {
                if (id == '') {
                    // 若选中全部方式，移除 courseType 参数
                    delete this.classListQueryParams.subjectId; 
                } else {
                    // 若选中具体方式，添加 courseType 参数
                    this.classListQueryParams.subjectId = id; 
                }
            },
            handleTopSearch(keyword) {
                this.classListQueryParams.keyword = keyword;
                console.log('获取到的搜索关键词:', keyword);
            }
        },
        created() {
            const keyword = this.$route.query.keyword; 
            if (keyword) {
                this.classListQueryParams.keyword = keyword; // 将关键词设置到查询参数中
            }
        },
        watch: {
            
        }
    };
</script>
<style lang="scss" scoped>
.top {
    position: relative;
}
</style>
